<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2019/5/8
  Time: 11:25
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
    <link href="css/style.css" rel="stylesheet"/>
    <link href="css/base.css" rel="stylesheet"/>
    <script src="js/jquery1.42.min.js" type="text/javascript"></script>
    <script src="js/jquery.SuperSlide.2.1.3.js" type="text/javascript"></script>
    <script src="js/flexible.min.js" type="text/javascript"></script>
    <title>分类</title>
</head>
<body style="background-color: rgb(242,242,242);">
<div class="classification">
    <div class="tab_title" style="height: 50px;">
        <ul style="padding: .3rem 0.2rem;">
            <c:forEach items="${classList}"  var="cl" varStatus="index">
                <li <c:if test="${cl.id eq commodityClassId }">  class="on"</c:if>  ><a href="/mobile/classification?myIndex=${index.index}&commodityClassId=${cl.id}" style="height: 20px">${cl.name}</a></li>
            </c:forEach>
        </ul>
    </div>
    <div class="commodityList">
        <div>
            <ul class="list">
                <c:forEach items="${commodityList}" var="commodity">
                    <li>
                        <a href="/mobile/sellCard?commodityClassId=${commodity.classId}&commodityId=${commodity.id}&commodityClassName=${commodity.className}&type=1&commodityName=${commodity.name}">
                            <div class="commodityList_left">
                                <img src="${commodity.imgPath}">
                                <div>
                                    <p>${commodity.name}</p>
                                    <p class="discount">${commodity.discount}折</p>
                                </div>
                            </div>
                            <div class="commodityList_right"><img src="img/hy24.png"></div>
                        </a>
                    </li>
                </c:forEach>

            </ul>
        </div>
        <div>

        </div>
    </div>
</div>
<div class="fount">
    <div>
        <a href="/mobile/index">
            <img src="img/home1.png">
            <div>首页</div>
        </a>
    </div>
    <div>
        <a href="/mobile/classification">
            <img src="img/hy121.png">
            <div class="active">分类</div>
        </a>
    </div>
    <div>
        <a href="/mobile/sellCard">
            <img src="img/hy11.png">
            <div>卖卡</div>
        </a>
    </div>
    <div>
        <a href="/mobile/toMyInfo">
            <img src="img/my.png">
            <div>我的</div>
        </a>
    </div>

</div>
</body>
<script>
    //选项卡
    $('.commodityList>div').eq(0).show();
    $('.tab_title li').click(function(){
        var index = $(this).index()
        console.log(index)
        $(this).addClass('on')
        $(this).siblings().removeClass('on')
        $('.commodityList>div').eq(index).show();
        $('.commodityList>div').eq(index).siblings().hide();
    })
    //给ul 赋宽
    var limun = $('.tab_title li').length
    console.log(limun)
    var uldemo = $('.tab_title ul')
    uldemo.css('width', limun * 2.1 +'rem')
    console.log(uldemo)
</script>
</html>
